<script>
export default {
	name: 'HomeLayout',
	components: {},
	props: {
		list: {
			type: Array,
			default: () => [],
		},
		nomore: {
			type: Boolean,
			default: () => false,
		},
	},
	setup() {
		return {};
	},
};
</script>
<template>
	<div class="home-wrap flex-flex over">
		<template v-if="list.length > 0">
			<div class="box" v-for="(item, index) in list" :key="index">
				<p class="box-title">{{ item.title }}</p>
				<div class="flexr flexcc flexjb box-info">
					<span>{{ item.userName }}</span>
					<span>{{ item.time }}</span>
				</div>
				<p>{{ item.content }}</p>
				<div class="flexr flexcc img-b fr">
					<el-space wrap :size="30">
						<div v-for="(val, k) in item.imgList" :key="k">
							<el-image class="img" :src="val" :zoom-rate="0.8" :preview-src-list="item.imgList" :initial-index="0" fit="cover" />
						</div>
					</el-space>
				</div>
			</div>
		</template>
		<template v-if="nomore">
			<p class="flexr flexcc flexjc nomore">当前用户还没有添加数据奥~</p>
		</template>
	</div>
</template>
<style lang="less">
.home-wrap {
	margin: 10px 0;
}
.box {
	padding: 20px 40px;
	border-bottom: 1px solid #ccc;
	.box-title {
		font-size: 20px;
		font-weight: bold;
	}
	.box-info {
		margin: 10px 0;
		color: #ccc;
	}
}
.nomore {
	width: 100%;
	height: 100%;
	font-size: 20px;
}
.over {
	overflow: auto;
}
.img {
	width: 200px;
	height: 200px;
	border-radius: 6px;
}

.img-b {
	margin: 10px 0;
}

.mr-20 {
	margin-right: 20px;
}
.mb-10 {
	margin-bottom: 10px;
}
</style>
